import { View, StyleSheet, Pressable, Text, Alert } from 'react-native'
import { Avatar } from 'react-native-paper';


const handleOnPressItem = (e: any) => {
    console.log('hello you clicked me')
}
const Index = () => {
    const friends = [
        { id: 1, name: 'weidingyi' },
        { id: 2, name: 'bbbb' },
        { id: 3, name: 'cccc' },
    ]


    return (
        <View style={styles.container}>
            {friends.map(
                item =>
                    <Pressable android_ripple={{ color: 'gray', borderless: false, radius: 100 }} style={styles.items}
                        key={item.id} 
                        onPress={handleOnPressItem}
                        onLongPress={() => {
                            console.log('hidden menu !!!')
                            Alert.prompt("hidden menu", "隐藏的菜单", function(rs) {
                                console.log('fff')
                            }, 'secure-text', '确认', '吞吞吐吐')
                        }}
                        >

                        <View style={styles.firend} >
                            <Avatar.Image  source={{ uri: `https://randomuser.me/api/portraits/men/${item.id}.jpg` }} />
                        </View>
                        <View>
                            <Text> {item.name} </Text>
                        </View>
                    </Pressable>
            )}

        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 10
    },
    firend: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 8,
        borderColor: 'red'
    },
    items: {
        borderRadius: 5,
        borderWidth: 0.1,
        marginBottom: 10,
        flexDirection: 'column',
        height: 'auto',
        maxWidth: 100,
        // display: "flex",
        padding: 10
    }
})

export default Index;
